<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/image.css">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <!--标准mui.css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/mui/mui.min.css" />-->
	<style>
		#notice{ overflow: hidden; white-space:nowrap; text-overflow: ellipsis; }
    .icon {
       width: 2.5em; height: 2.5em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    p{color: black;line-height: 18px;}
    .mui-card1{font-size:14px;position:relative;overflow:hidden;margin-right:10px;margin-left:10px;margin-bottom:10px;border-radius:2px;background-color:#fff;background-clip:padding-box;box-shadow:0 1px 2px rgba(0,0,0,.3)}
    .chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
      .aui-col-xs-3{padding: 1px;}
      .img-custom{
        height: 4rem;
      }
  </style>
</head>
<body>
  <div class="mui-card">
  		<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../image/cbd.jpg)"></div>
  		<div class="mui-card-content">
    			<div class="mui-card-content-inner">
      				<p style="color: #878787;" id="noticeTime"></p>
      				<p style="color: #333;" id="noticeContent"></p>
    			</div>
  		</div>
  		<div class="mui-card-footer" onclick="openWin('announcement_detail')">
    			<a class="mui-card-link">查看公告详情</a>
  		</div>
	</div>
  <div class="mui-card">
      <div class="aui-grid">
            <div class="aui-row">
                <div class="aui-col-xs-3" onclick="openWin('check_work')">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingwei"></use>
                    </svg>
                    <div class="aui-grid-label">打卡</div>
                </div>
                <div class="aui-col-xs-3" onclick="openWin('daily')">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuoye"></use>
                    </svg>
                    <div class="aui-grid-label">写汇报</div>
                </div>
                <div class="aui-col-xs-3" onclick="openWin('file')">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="aui-grid-label">文档</div>
                </div>
                <div class="aui-col-xs-3" onclick="openWin('workflow')">
                    <!--<div class="aui-badge">9</div>-->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongwenbao"></use>
                    </svg>
                    <div class="aui-grid-label">审批</div>
                </div>
                <div class="aui-hr aui-clearfix"></div>
            </div>
      </div>
	</div>
  <div class="mui-card">
      <div class="chart" id="pieChart"></div>
      <div class="mui-card-footer" onclick="openWin('today_sign')"><a class="mui-card-link">查看今日考勤</a></div>
  </div>

  <section class="aui-content" id="daily-list">

  </section>

</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../css/color-icon/iconfont.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.zoom.js"></script>
<script type="text/javascript" src="../script/mui/mui.previewimage.js"></script>
<script type="text/javascript" src="../script/echarts.common.min.js"></script>
<script type="text/javascript">
mui.previewImage();
var toast = new auiToast();
apiready = function(){
     $api.setStorage("daily_index", 0);
     load();
     getAnnouncement();
     //下拉刷新
     api.setRefreshHeaderInfo({
         visible: true,
         loadingImg: 'widget://image/refresh.png',
         bgColor: '#ccc',
         textColor: '#fff',
         textDown: '下拉刷新...',
         textUp: '松开刷新...',
         showTime: true
     }, function(ret, err){
         window.location.reload();
         api.refreshHeaderLoadDone();
         //$('#tips-1').show();
         //setTimeout(closeTips,2000);

     });
     //上拉翻页
     api.addEventListener({
         name : 'scrolltobottom'
     }, function(ret, err) {
         $api.setStorage("daily_index", $api.getStorage("daily_index") - 0 + 1);
         load();
     });

     api.addEventListener({
         name:'userInfoReload'
     },function(ret,err){
         window.location.reload();
         //coding...
     });


	   pushBind($api.getStorage("cn_name"), $api.getStorage("ryId"));
     getPieData();
 }

 function getPieData() {
      api.ajax({
          url: ServeUrl + 'm=Sign&a=getPieData',
          method : 'post',
          cache : false,
          timeout : 30,
          dataType : 'json',
      }, function(ret, err) {
          if (ret) {
              // alert(JSON.stringify(ret));
              var byId = function(id) {
                  return document.getElementById(id);
              };
              var pieChart = echarts.init(byId('pieChart'));
              pieChart.setOption(getOption('pie', ret));
          } else {
              /*alert(JSON.stringify(err));*/
          }
      });
  }
  var getOption = function(chartType, value) {
      if (!value) return false;
      var chartOption =  {
          calculable: false,
          series: [{
              name: '访问来源',
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              data: [{
                  value: value.noSign,
                  name: '未签到',
                  itemStyle: {
                      normal: {
                          color: '#69f'
                      }
                  }
              }, {
                  value: value.late,
                  name: '迟到',
                  itemStyle: {
                      normal: {
                          color: '#fc0'
                      }
                  }
              }, {
                  value: value.leaveEarly,
                  name: '早退',
                  itemStyle: {
                      normal: {
                          color: '#c6f'
                      }
                  }
              }, {
                  value: value.normal,
                  name: '正常',
                  itemStyle: {
                      normal: {
                          color: '#6c0'
                      }
                  }
              }]
          }]
      };
      return chartOption;
  };


 //推送绑定
 function pushBind (name, id) {
    // alert(id)
    if(id == undefined) return false;
     var push = api.require('push');
     push.bind({
         userName: name,
         userId: id
     }, function(ret, err){
         if( ret ){
             // alert( JSON.stringify( ret) );
         }else{
             // alert( JSON.stringify( err) );
         }
     });
 }

 // 加载公告
 function getAnnouncement () {
     api.ajax({
         url: ServeUrl + 'm=Announcement&a=getAnnouncement',
         method : 'post',
         cache : false,
         timeout : 30,
         dataType : 'json',
     }, function(ret, err) {
         if (ret) {
             // alert(JSON.stringify(ret));
             $('#noticeContent').html(ret.title);
             $('#noticeTime').html(ret.createtime);
         } else {
             //alert(JSON.stringify(err));
         }
     });
 }
//资讯列表加载
 function load(first, index2) {
     api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '拼命加载中...',
        text: '不如喝茶去...',
        modal: false
     });
     var index = $api.getStorage("daily_index");
     var username = $api.getStorage("username");
     var url = ServeUrl + "m=Daily&a=dailyList&pageIndex=" + index + "&pageCount=15&username="+username;
     ajaxRequest(url, 'get', '', function(data) {
         dealWithHtml(data, first, index);
     });

 }

 function ajaxRequest(url, method, datas, callBack) {
     api.ajax({
         url : url,
         method : method,
         cache : false,
         timeout : 30,
         dataType : 'json',
         data : {
             values : datas
         }
     }, function(ret, err) {
         if (ret.data) {
             callBack(ret, err);
         } else {
             api.toast({
                 msg:'我也是有底线的'
             });
             /*toast.success({
                 title:"我也是有底线的",
                 duration:2000
             });*/
             api.hideProgress();
         }
     });
 }

//字符串拼接
 function dealWithHtml(data, first, index) {

     var html = '';
     for (var i = 0; i < data.data.length; i++) {
          if(data.data[i].user_img){
             user_img = ServeIp+'include/data/headImg/'+data.data[i].user_img;
          }else {
             user_img = '../image/user.png';
          }
          html+='<div class="aui-card-list mui-card1">'
          html+='<div class="aui-card-list-header aui-card-list-user">'
          html+='<div class="aui-card-list-user-avatar">'
          html+='<img src="'+user_img+'" class="aui-margin-r-10" data-preview-src="" data-preview-group="1" style="width:2rem;border-radius:4px;" />'
          html+='</div>'
          html+='<div class="aui-card-list-user-name">'
          html+='<div>'+data.data[i].cn_name+'</div>'
          html+='<div class="aui-label aui-label-primary aui-label-outlined">'+data.data[i].daily_type+'</div>'
          html+='</div>'
          html+='<div class="aui-card-list-user-info">'+data.data[i].createtime+'</div>'
          html+='</div>'
          html+='<div class="aui-card-list-content aui-list aui-media-list aui-list-noborder aui-padded-t-0">'
          html+='<div class="aui-list-item aui-list-item-middle aui-padded-r-15">'
          html+='<div class="aui-media-list-item-inner ">'
          html+='<div class="aui-list-item-inner aui-padded-l-10">'+data.data[i].daily_content+'</div>'
          html+='</div>'

          html+='<div class="aui-row">'
          for (var j = 0; j < data.data[i].attachment.length; j++) {
              var img_id = data.data[i].attachment[j];
              var index = img_id.indexOf("."); //得到"."在第几位
              img_id = img_id.substring(index); //截断"."之前的，得到后缀
              if(img_id!=".bmp"&&img_id!=".png"&&img_id!=".gif"&&img_id!=".jpg"&&img_id!=".jpeg"&&img_id!=".BMP"&&img_id!=".PNG"&&img_id!=".GIF"&&img_id!=".JPG"&&img_id!=".JPEG"){  //根据后缀，判断是否符合图片格式

              }else {
                  html += '<div class="aui-col-xs-3 img-custom"><img src="'+ServeIp+'include/data/daily/'+data.data[i].attachment[j]+'" data-preview-src="" data-preview-group="1"></div>'
              }
          }
          html+='</div>'

          html+='</div>'
          html+='</div>'
          html+='<div class="aui-card-list-footer aui-border-b" style="padding-left:1.5rem;padding-right:1.5rem;">'
          html+='<div><i class="aui-iconfont aui-icon-laud aui-margin-r-5"></i>赞</div>'
          html+='<div><i class="aui-iconfont aui-icon-comment aui-margin-r-5" onclick="funOpenWin( this,'+data.data[i].id+' );" data-name="comment-frm"></i>评论</div>'
          html+='</div>'
          html += '<section class="aui-content-padded aui-padded-b-10">'
          for (var j = 0; j < data.data[i].comment.length; j++) {
              html += '<p onclick="reply('+"'"+data.data[i].comment[j].parent.createname+"',"+data.data[i].comment[j].parent.id+','+data.data[i].id+')"><a>'+data.data[i].comment[j].parent.createname+'</a>:&nbsp;'+data.data[i].comment[j].parent.comment+'</p>'
              for (var k = 0; k < data.data[i].comment[j].child.length; k++) {
                  html += '<p onclick="reply('+"'"+data.data[i].comment[j].child[k].parent.createname+"',"+data.data[i].comment[j].parent.id+','+data.data[i].id+')"><a>'+data.data[i].comment[j].child[k].parent.createname+'</a>回复<a>'+data.data[i].comment[j].child[k].parent.receiveman+'</a>:&nbsp;'+data.data[i].comment[j].child[k].parent.comment+'</p>'
              }
          }
          html += '</section>'
          html += '</div>';
     }
    $("#daily-list").append(html);
    api.hideProgress();

 }

 //弹出评论分享框架
 function funOpenWin( tag,id ){
     var name = tag.getAttribute('data-name');
     $api.setStorage( 'backFrame' , name );  //设置需要关闭的frame
     api.openFrame({
         name: name,
         url : 'openWin.html',
         rect: {
             x: 0,
             y: 0,
             w: api.winWidth,
             h: api.winHeight
         },
         pageParam:{
            daily_id : id,
         }
     });
 };

function reply(uname,id,daily_id){
    $api.setStorage( 'backFrame' , 'comment-reply-frm' );  //设置需要关闭的frame
    api.openFrame({
        name: 'comment-reply-frm',
        url : 'openWin.html',
        rect: {
            x: 0,
            y: 0,
            w: api.winWidth,
            h: api.winHeight
        },
        pageParam:{
           id : id,
           daily_id : daily_id,
           username : uname
        }
    });

}

function openWin(name) {
    api.openWin({
        name: name,
        url: name+'_win.html',
    });
}

function test(name){
  alert(name);
}
</script>
</html>
